<template>
    <div>
        <canvas id="myChart2"></canvas>
    </div>
</template>
<script>

import Chart from 'chart.js'
export default {
    components: {

    },
    data () {
        return {
            chartdata: {
                // labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                labels: [],
                datasets: [{
                    label: '',
                    backgroundColor: 'rgba(0, 0 ,255, 0.5)',
                    borderColor: 'rgba(0, 0 ,255, 0.5)',
                    borderWidth: 2,
                    pointStrokeColor: '#fff',
                    pointStyle: 'crossRot',
                    data: [],
                    cubicInterpolationMode: 'monotone',
                    spanGaps: true,
                    fill: false
                }, {
                    label: '',
                    backgroundColor: 'rgba(255, 0 ,0, 0.5)',
                    borderColor: 'rgba(255, 0 ,0, 0.5)',
                    borderWidth: 3,
                    pointStrokeColor: '#fff',
                    pointStyle: 'crossRot',
                    data: [],
                    cubicInterpolationMode: 'monotone',
                    spanGaps: true,
                    fill: false
                }, {
                    label: 'Filled',
                    backgroundColor: 'rgba(0, 255 ,0, 0.5)',
                    borderColor: 'rgba(0, 255 ,0, 0.5)',
                    data: [2500, 19, -2400, 31, 46, -500, 600, 720, 220, 140, 200, 500],
                    fill: true
                }]
            }
        }
    },
    mounted () {
        this.getDataFromBackend()
    },
    methods: {

        getDataFromBackend () {
            this.$http.get(
            `${window.SITE_CONFIG['baseURL']}/demo/charts2/list`,
            {
                mode: 'no-cors',
                headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json'
                },
                withCredentials: true,
                params: {
                'spName': 'SP_EMS_Electricity',
                'spParams': '2017-08-20,2017-08-28'
                }
            }
            ).then(({data}) => {
                this.chartdata.labels = data.results[3].label_data
                for (var i = 0; i < 2; i++) {
                    this.chartdata.datasets[i].label = data.results[i].label
                    this.chartdata.datasets[i].data = data.results[i].label_data
                }
                this.drawChart()
            })
        },

        drawChart () {
            var ctx2 = document.getElementById('myChart2')
            /* eslint-disable no-new */
            new Chart(ctx2, {
                type: 'line',
                data: this.chartdata,
                options: {
                }
            })
        }

    }
}
</script>
